<template>
  <div>
    <!-- 搜索框 -->
    <form action="/">
      <!-- <van-icon name="arrow-left" /> -->
  <!-- <van-search
    v-model="value"
    placeholder="搜索商品名称"
    @cancel="onCancel"
  /> -->
  <div class="search">
  <div class="search-content">
    <div class="icon-css">
      <van-icon name="arrow-left" @click="onCancel"/>
    </div>
     <input class="search-input" type="text" v-model="value" placeholder="搜索商品名称">
     <div class="icon-css">
      <van-icon name="search" />
     </div>
     
  </div>
  </div>
</form>
    <!-- 搜索框 -->
    <!-- 搜索历史 -->
   <div class="history">
    <div class="history-top">
      <span class="text">搜索历史</span>
    <van-icon name="delete-o" />
    </div>
    <div class="history-contant">
      <span class="history-item">全部商品</span>
      <span class="history-item">全部商品</span>
    </div>
   </div>
   <!-- 搜索历史 -->
<!-- 搜索发现 -->
   <div class="search-find">
    <div class="search-top">
      <span class="text">探索发现</span>
    </div>
    <div class="search-find-contant">
      <div class="left">
        <div class="left-item" v-for="(item,index) in state.leftFind" :key="index">{{item}}</div>
      </div>
      <div class="right">
        <div class="right-item" v-for="(item,index) in state.rightFind" :key="index">{{item}}</div>
      </div>
    </div>
   </div>
   
<!-- 搜索发现 -->
  </div>

</template>

<script>
import { reactive, ref } from 'vue';
// import { showToast } from 'vant';
import { useRouter } from 'vue-router';
export default {
name:'searchList',
setup(){
  const state = reactive({
    historyList:[],
    leftFind:['全部商品','红米','空调','洗衣机'],
    rightFind:['小米手机','小米平板5Pro','显示器','电视']
  })
  const router = useRouter()
  const value = ref('');
    // const onSearch = (val) => showToast(val);
    //点击取消返回上一页
    const onCancel = () => {
      router.go(-1);
    };
    return {
      value,
      state,
      onCancel,
    };
  },
}

</script>

<style lang="scss" scoped>
.search{
  display: flex;
  justify-content: space-between;
  height:80px;
  width: 100%;
  text-align: center;
  line-height: 70px;
  background-color: #f5f5f5;
  /* .search-content{
    // margin:2px 0px 2px 30px;
  } */
    .icon-css{
      display: inline-block;
      width: 90px;
      height: 34px;
      font-size: 40px;     
      color: #999;
      .van-badge__wrapper{
        font-weight: 800;
      }
    }
  .search-input{
    border:none;
    margin-left:10px;
    padding-left:20px;
    font-size: 34px;
    height: 50px;
    width: 260pX;
  }
}
.history{
  .history-top{
      padding:16px 24px 0px 24px;
      display: flex;
      justify-content:space-between;
  }
  .history-contant{
    display: flex;
    flex-wrap: wrap;
    width: 100%;

  }
  .history-item{
    display: inline-block;
    width: 136px;
    height: 72px;
    font-size: 23px;
    margin: 24px 0px 24px 24px;
    text-align: center;
    line-height:72px;
    background-color: #f5f5f5;
    border-radius: 15%; 
  }
}
.search-find{
  padding:0px 24px 0px 24px;
  .search-find-contant{
    display: flex;
    font-size: 23px;
    margin:20px;
    .left{
      width: 300px;
      .left-item{
        height: 54px;
        line-height: 54px;
      }
    }
    .right{
      flex: 1;
      .right-item{
        height: 54px;
        line-height: 54px;
      }
    }
  }
}
.van-badge__wrapper{
  font-size: 34px;
}
  .text{
    font-size:4.26667vw;
    font-weight: 600;
  }
</style>